import { defineComponent } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import RoundInfo from "@/components/RoundInfo";
import { Steps, Step } from "vant";
import RowView from "@/components/RowView";
import Text from "@/components/Text";
export default defineComponent({
  name: "",
  setup() {
    const render1 = () => {
      const data = [
        {
          src: "https://img0.baidu.com/it/u=455228103,934359577&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680368400&t=6b05b5956619173cd55195675ed50d87",
          title: "番茄",
        },
        {
          src: "https://img0.baidu.com/it/u=455228103,934359577&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680368400&t=6b05b5956619173cd55195675ed50d87",
          title: "草莓",
        },
        {
          src: "https://img0.baidu.com/it/u=455228103,934359577&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680368400&t=6b05b5956619173cd55195675ed50d87",
          title: "苹果",
        },
      ];
      return (
        <CardView>
          <RoundInfo
            src="https://img0.baidu.com/it/u=1684532727,1424929765&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1680368400&t=35762c76e21d1ab3496784bb3f8c196f"
            title="测试"
            text="aaa"
            right={() => <div>已完成</div>}
          />
          <RowView class="!items-start flex flex-wrap">
            {data.map((e) => {
              return (
                <div>
                  <img
                    src={e.src}
                    class={["w-[96px] h-[96px] rounded-8 mr-15"]}
                  />
                </div>
              );
            })}
          </RowView>
        </CardView>
      );
    };
    const render2 = () => {
      return (
        <CardView title="检测进度" class={"!mt-[10px]"}>
          <Steps direction="vertical">
            <Step>
              <p>2022.10.29 11:29:48</p>
              <h3>成功向大户预约帮检测</h3>
            </Step>
            <Step>
              <p>2022.10.29 11:29:48</p>
              <h3>大户已取样</h3>
            </Step>
            <Step>
              <p>2022.10.29 11:29:48</p>
              <h3>大户已送检</h3>
            </Step>
            <Step>
              <p>2022.10.29 11:29:48</p>
              <h3>检测已完成，点击查看检测报告</h3>
            </Step>
          </Steps>
        </CardView>
      );
    };
    const render3 = () => {
      const data = [
        {
          name: "用户昵称",
          value: "xxx",
        },
        {
          name: "订单编号",
          value: "xxx",
        },
        {
          name: "预约时间",
          value: "xxx",
        },
        {
          name: "取样时间",
          value: "xxx",
        },
        {
          name: "送检时间",
          value: "xxx",
        },
        {
          name: "检测完成时间",
          value: "2022-10-29 14:58:48",
        },
      ];
      return (
        <CardView title="订单信息" class={"!mt-[10px]"}>
          {data.map((e) => {
            return (
              <div class={"flex justify-between"}>
                <Text class={"text-[#666] text-[14px]"}>{e.name}</Text>
                <Text class={"text-[#999] text-[14px]"}>{e.value}</Text>
              </div>
            );
          })}
        </CardView>
      );
    };
    return () => {
      return (
        <PageTitle title="检测结果" childClass="!p-[10px]">
          {render1()}
          {render2()}
          {render3()}
        </PageTitle>
      );
    };
  },
});
